<!--This code is heavily commented for ease of use and customization. Please read all comments carefully. -->

<!--
The event submission form is a customized TerminalFour eForm. 

For more information about using eForms, please read T4's documentation on eForms: https://extranet.terminalfour.com/documentation/core/current/assets/eforms/ 

Familiarity with the general functionality of eForms will be extremely helpful when you customize your event submission form.
-->

<!--
At the time of this writing, a live example of the form can be viewed at http://stage.umaryland.edu/working-files/submit-event/. This is subject to change. Please do not submit events through this form.
-->

<!--To use this code, create a new Content Type. For example, the content type created for the Administrative Units is named "Calendar Event Uni Admin Submission Form." Ensure the eForm box is checked on the General tab. You do not need to add any elements to this content type. Create a new content layout with a Content Layout Name of text/html. Copy the code from this document into the Content Layout Code field. Add this content type to a page to create an instance of the event submission form.-->

<!-- This event submission form requires both JQuery and the JQuery UI. The JQuery UI is linked below. JQuery is linked in the header of our UMB page layouts. -->
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">


 
<script type="text/javascript">

  $(function() {
      /*This form uses the JQuery UI's Datepicker to provide a widget for selecting dates. Every datepicker on the page must be initialized below*/
      $( "#start_date_picker" ).datepicker({dateFormat: "MM d, yy"});
      $( "#end_date_picker" ).datepicker({dateFormat: "MM d, yy"});
      $( "#recur_end_date_picker" ).datepicker({dateFormat: "MM d, yy"});
      $( "#adhoc_1_date_picker" ).datepicker({dateFormat: "MM d, yy"});
      $( "#adhoc_2_date_picker" ).datepicker({dateFormat: "MM d, yy"});
      $( "#adhoc_3_date_picker" ).datepicker({dateFormat: "MM d, yy"});
  });

  $(function() {
    /*The Event Location field uses autocomplete functionality from the JQuery UI to suggest location names to users. Enter your list of suggested locations below.*/
    var suggestedLocations = [
      "100 N. Green St.",
      "737 W. Lombard St.",
      "Allied Health Building",
      "Biomedical Research Facility",
      "Bressler Research Building",
      "School of Dentistry",
      "East Hall",
      "George Gray Hall",
      "Health Sciences Facility (HSF) I",
      "Health Sciences Facility (HSF) II",
      "Health Sciences Facility (HSF) III (2016)",
      "Hilda Katz Blaustein Research Center",
      "Howard Hall",
      "Institute of Human Virology",
      "Medical School Teaching Facility (MSTF)",
      "Nathan Patz Law Center",
      "Thurgood Marchall Law Library",
      "Pharmacy Hall",
      "Pharmacy Learning Center",
      "School of Medicine Admissions Office",
      "School of Nursing",
      "School of Social Work",
      "630 W. Fayette St.",
      "111 S. Penn. St.",
      "BioPark Fitness and Conditioning Center",
      "Community Outreach Police Station",
      "Davidge Hall",
      "National Museum of Dentistry",
      "Environmental Health & Safety Building",
      "Grand Offices",
      "Greene Street Building",
      "Health Sciences & Human Services Library (HS/HSL)",
      "Lexington Building",
      "Maryland Bar Center",
      "Maryland Forensic Medical Center",
      "Operations and Maintenance Offices",
      "Paca-Pratt Building",
      "Parking and Commuter Services Office",
      "Pascault Row",
      "Pine Street Annex",
      "Pine Street Police Station",
      "Saratoga Building",
      "SMC Campus Center",
      "Seven Scholars University Store",
      "URecFit",
      "University of Maryland BioPark - Building One",
      "University of Maryland BioPark - Building Two",
      "University Suites at Fayette Square",
      "Westminster Hall",
      "Baltimore Veterans Affairs Medical Center",
      "School of Dentistry",
      "University Family Medicine",
      "Maryland Women's Health Center at Penn Street",
      "Walter P. Carter Center",
      "University of Maryland Medical Center",
      "Harry and Jeanette Weinberg Building",
      "Homer Gudelsky Building",
      "R Adams Cowley Shock Trauma Center",
      "Roslyn and Leonard Stoler Pavilion",
      "UM Marlene and Stewart Greenebaum Cancer Center",
      "UMMC Emercency Department",
      "Maryland Proton Treatment Center",
      "UM Professional Building",
      "James T Frenkil Building",
      "Faculty Physicians, Inc.",
      "Baltimore Arena",
      "Babe Ruth Birthplace/Museum",
      "Baltimore Convention Center",
      "Bromo-Seltzer Arts Tower",
      "Downtown Baltimore Child Care, Inc.",
      "Edgar Allen Poe Gravesite",
      "Westminster Burying Grounds",
      "France-Merrick Performing Arts Center",
      "Hope Lodge",
      "Lexington Market",
      "Market Center Post Office",
      "Maryland Institute for Emergency Medical Services Systems",
      "Old St. Paul's Cemetery",
      "Oriole Park at Camden Yards",
      "Ronald McDonald House",
      "Sports Legends Museum"
    ];
    $( "#event_location" ).autocomplete({
      source: suggestedLocations
    });
  });



  /*The following "set..." functions convert the date/time input from the form to a format compatible with the Calendar Event content types in T4. This process must be completed for every date field in the form prior to form submission.*/
  function setStartDate(){
     
      var hourDay = document.getElementById("start_hour").value;
      var minDay = document.getElementById("start_minute").value;
      var amPm = document.getElementById("start_ampm").value;
      if (amPm == "p.m.") {
        hourDay = parseInt(hourDay) + 12;
      }
      var dateOccured;
      if((hourDay ==  "*") || (minDay  == "*")) {
          dateOccured = "";        
      }
      else {
          dateOccured = $.datepicker.formatDate( "d/mm/yy", $.datepicker.parseDate( "MM d, yy" , document.getElementById("start_date_picker").value ) ) + " " + hourDay + ":" + minDay + ":0000";
      }
      document.getElementById("start_date").value = dateOccured;
  }
  function setEndDate(){
     
      var hourDay = document.getElementById("end_hour").value;
      var minDay = document.getElementById("end_minute").value;
      var amPm = document.getElementById("end_ampm").value;
      if (amPm == "p.m.") {
        hourDay = parseInt(hourDay) + 12;
      }
      var dateOccured;
      if((hourDay ==  "*") || (minDay  == "*")) {
          dateOccured = "";        
      }
      else {
          dateOccured = $.datepicker.formatDate( "d/mm/yy", $.datepicker.parseDate( "MM d, yy" , document.getElementById("end_date_picker").value ) ) + " " + hourDay + ":" + minDay + ":0000";
      }
      document.getElementById("end_date").value = dateOccured;
  }
  function setRecurEndDate(){

      var dateOccured;
      dateOccured = $.datepicker.formatDate( "d/mm/yy", $.datepicker.parseDate( "MM d, yy" , document.getElementById("recur_end_date_picker").value ) ) + " 00:00:0000";
     
      document.getElementById("recur_end_date").value = dateOccured;
  }
  function setAdHoc1Date(){

      var dateOccured;
      dateOccured = $.datepicker.formatDate( "d/mm/yy", $.datepicker.parseDate( "MM d, yy" , document.getElementById("adhoc_1_date_picker").value ) ) + " 00:00:0000";
     
      document.getElementById("adhoc_1_date").value = dateOccured;
  }
  function setAdHoc2Date(){

      var dateOccured;
      dateOccured = $.datepicker.formatDate( "d/mm/yy", $.datepicker.parseDate( "MM d, yy" , document.getElementById("adhoc_2_date_picker").value ) ) + " 00:00:0000";
     
      document.getElementById("adhoc_2_date").value = dateOccured;
  }
  function setAdHoc3Date(){

      var dateOccured;
      dateOccured = $.datepicker.formatDate( "d/mm/yy", $.datepicker.parseDate( "MM d, yy" , document.getElementById("adhoc_3_date_picker").value ) ) + " 00:00:0000";
     
      document.getElementById("adhoc_3_date").value = dateOccured;
  }

   /*The Calendar Event content types in T4 Site Manager have seperate fields for Name and Title. This eForm assigns automatically assigns the value entered for the Title to the Name field as well.*/
  function setName(){
      document.getElementById("event_name").value = document.getElementById("event_title").value;
  }

  /*The Captcha is validated with AJAX. 
    You must upload recaptcha_ajax.php and recaptchalib.php to a folder in the Media Library. The T4 tag in the code below should be altered to point to your copy of recaptcha_ajax.php.
  */
  function validateCaptcha() {
        var challengeField = $('input#recaptcha_challenge_field').val(),
            responseField  = $('input#recaptcha_response_field').val();

        var html = $.ajax({
            type: 'POST',
            url: '<t4 type="media" id="37083" formatter="path/*"/>', 
            data: "recaptcha_challenge_field=" + challengeField + "&recaptcha_response_field=" + responseField,
            async: false
        }).responseText;

        if (html.replace(/^\s+|\s+$/, '') == "success") {
            return true;
        } else {
            Recaptcha.reload();
            return false;
        }
  }
  /*If the captcha is validated correctly, this function sets the form attributes required to properly submit the eForm.*/
  function setFormAttributes() {
      $('#submit_event_form').attr('action','https://sitemanager.umaryland.edu/terminalfour/eForms');
      $('#submit_event_form').attr('method','post');
      $('#submit_event_form').attr('enctype','multipart/form-data');
  }

  /*The following function is triggered when the user clicks "Submit." It calls the functions defined above.*/
  function setValues(){
      if (!validateCaptcha()) {
        /* You can customize the message displayed if the Captcha fails below*/
        alert('The captcha was entered incorrectly. Please try again.');
        return false;
      } else {
        setStartDate();
        setEndDate();
        setRecurEndDate();
        setAdHoc1Date();
        setAdHoc2Date();
        setAdHoc3Date();
        setName(); 
        setFormAttributes();
        
      }
  }
</script>


<!-- The form's action attribute was chosen so that the form will not submit by default. If the Captcha is validated, the Form's attributes will be changed by the setFormAttributes() function above.-->
<form action="javascript:void(0);" onsubmit="setValues()" id="submit_event_form" class="eform">
  
  <!-- The value of the following input should be the id of your Calendar Event content type. In this case, 242 is the id of the "Calendar Event Uni Admin" content type. Each school should select the event content type built for them.-->
  <input type="hidden" name="tid" value="242" />
  
  <!-- The ID of the section the eForm is submitted to. In this case, 16736 is the id of Common Calendar > Events > University Administration > Submitted Events-->
  <input type="hidden" name="sid" value="16736" />

  <!-- The ID of the channel the content should be assigned. In this case, 39 is the id of the calendar.umaryland.edu channel. Multiple id's can be entered as comma-separated values. -->
  <input  type="hidden" name="channel" value="39" />
  
  <!-- The URL of the page to which the form should redirect following submission.-->
  <input type="hidden" name="redirect" value="/working-files/submit-event/thank-you/" />
  
  <!-- Value is 1 if you want content to be submitted as pending or 0 if you want content to be submitted as approved -->
  <input type="hidden" name="status" value="1" />
  
  <!--The content's Name will automatically be assigned the same value as the Title with JavaScript, as described above-->
  <input type="hidden" name="Name" id="event_name"/>
  

<div class="form-unit"><label for="event_title">Event Name*</label><br />
    <input type="text" name="Title" id="event_title" maxlength="200" size="200" required="required" />
</div>


<div class="form-unit">  
<!-- The UMB page layouts employ Bootstrap for fluid grid layouts. Row-fluid, span6, and span4 are Bootstrap classes. If your page does not use Bootstrap formatting, these will serve no purpose and can be removed if you so desire.

In general, the markup of this form is designed to use the CSS associated with the UMB page templates. If you are using a different template, you will likely need to add custom markup and/or CSS styles to style and format the form.
-->
<div class="row-fluid"> 
    <div class="span6">
        <label for="start_date_picker">Event Begins</label> <br />
        <label for="start_date_picker">Date*&nbsp;</label><input type="text" id="start_date_picker" required="required"  readonly="readonly" style="background:white;"><br />
        <label for="start_hour">Time*&nbsp;</label><select name="start_hour" id="start_hour" class="hour_field" size="1" required="required" >
                <option value="01">1</option>
                <option value="02">2</option>
                <option value="03">3</option>
                <option value="04">4</option>
                <option value="05">5</option>
                <option value="06">6</option>
                <option value="07">7</option>
                <option value="08">8</option>
                <option value="09">9</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="00">12</option>
        </select> : 
        <select name="start_minute" id="start_minute" class="minute_field" size="1" required="required" >
                <option value="00">00</option>
                <option value="01">01</option>
                <option value="02">02</option>
                <option value="03">03</option>
                <option value="04">04</option>
                <option value="05">05</option>
                <option value="06">06</option>
                <option value="07">07</option>
                <option value="08">08</option>
                <option value="09">09</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
                <option value="13">13</option>
                <option value="14">14</option>
                <option value="15">15</option>
                <option value="16">16</option>
                <option value="17">17</option>
                <option value="18">18</option>
                <option value="19">19</option>
                <option value="20">20</option>
                <option value="21">21</option>
                <option value="22">22</option>
                <option value="23">23</option>
                <option value="24">24</option>
                <option value="25">25</option>
                <option value="26">26</option>
                <option value="27">27</option>
                <option value="28">28</option>
                <option value="29">29</option>
                <option value="30">30</option>
                <option value="31">31</option>
                <option value="32">32</option>
                <option value="33">33</option>
                <option value="34">34</option>
                <option value="35">35</option>
                <option value="36">36</option>
                <option value="37">37</option>
                <option value="38">38</option>
                <option value="39">39</option>
                <option value="40">40</option>
                <option value="41">41</option>
                <option value="42">42</option>
                <option value="43">43</option>
                <option value="44">44</option>
                <option value="45">45</option>
                <option value="46">46</option>
                <option value="47">47</option>
                <option value="48">48</option>
                <option value="49">49</option>
                <option value="50">50</option>
                <option value="51">51</option>
                <option value="52">52</option>
                <option value="53">53</option>
                <option value="54">54</option>
                <option value="55">55</option>
                <option value="56">56</option>
                <option value="57">57</option>
                <option value="58">58</option>
                <option value="59">59</option>
        </select>
        <select name="start_ampm" id="start_ampm" class="ampm_field" size="1" required="required" >
                <option value="a.m.">a.m.</option>
                <option value="p.m.">p.m.</option>
        </select><br />
      
        <!-- Date/time elements must be properly formatted before they can be submitted by T4's system. Prior to submission, a JavaScript function will automatically format the date and time correctly and assign the formatted date to the following hidden field. -->
        <input type="hidden" name="Start Date" id="start_date" value="" />
</div>

<div class="span6"> 
        <label for="end_date_picker">Event Ends</label> <br />
        <label for="end_date_picker">Date*&nbsp;</label><input type="text" id="end_date_picker" required="required"  readonly="readonly" style="background:white;" ><br />
        <label for="end_hour">Time*&nbsp;</label><select name="end_hour" id="end_hour" class="hour_field" size="1" required="required" >
                <option value="01">1</option>
                <option value="02">2</option>
                <option value="03">3</option>
                <option value="04">4</option>
                <option value="05">5</option>
                <option value="06">6</option>
                <option value="07">7</option>
                <option value="08">8</option>
                <option value="09">9</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="00">12</option>
        </select> : 
        <select name="end_minute" id="end_minute" class="minute_field" size="1" required="required" >
                <option value="00">00</option>
                <option value="01">01</option>
                <option value="02">02</option>
                <option value="03">03</option>
                <option value="04">04</option>
                <option value="05">05</option>
                <option value="06">06</option>
                <option value="07">07</option>
                <option value="08">08</option>
                <option value="09">09</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
                <option value="13">13</option>
                <option value="14">14</option>
                <option value="15">15</option>
                <option value="16">16</option>
                <option value="17">17</option>
                <option value="18">18</option>
                <option value="19">19</option>
                <option value="20">20</option>
                <option value="21">21</option>
                <option value="22">22</option>
                <option value="23">23</option>
                <option value="24">24</option>
                <option value="25">25</option>
                <option value="26">26</option>
                <option value="27">27</option>
                <option value="28">28</option>
                <option value="29">29</option>
                <option value="30">30</option>
                <option value="31">31</option>
                <option value="32">32</option>
                <option value="33">33</option>
                <option value="34">34</option>
                <option value="35">35</option>
                <option value="36">36</option>
                <option value="37">37</option>
                <option value="38">38</option>
                <option value="39">39</option>
                <option value="40">40</option>
                <option value="41">41</option>
                <option value="42">42</option>
                <option value="43">43</option>
                <option value="44">44</option>
                <option value="45">45</option>
                <option value="46">46</option>
                <option value="47">47</option>
                <option value="48">48</option>
                <option value="49">49</option>
                <option value="50">50</option>
                <option value="51">51</option>
                <option value="52">52</option>
                <option value="53">53</option>
                <option value="54">54</option>
                <option value="55">55</option>
                <option value="56">56</option>
                <option value="57">57</option>
                <option value="58">58</option>
                <option value="59">59</option>
        </select>
        <select name="end_ampm" id="end_ampm" class="ampm_field" size="1" required="required" >
                <option value="a.m.">a.m.</option>
                <option value="p.m.">p.m.</option>
        </select><br />
      
        <input type="hidden" name="End Date" id="end_date" value="" />
</div>
</div>
</div>


  
<div class="form-unit">
  <label for="recurs_every">Recurs Every*</label> Select if/when this event repeats.<br />
    <select name="Recurs Every" required="required" id="recurs_every">
      <option value="169" selected>Never</option>
      <option value="198">Ad-Hoc</option>
      <option value="130">Day</option>
      <option value="160">Month</option>
      <option value="150">Week</option>
      <option value="166">Year</option>
      <option value="159">10 Weeks</option>
      <option value="145">2 Days</option>
      <option value="161">2 Months</option>
      <option value="151">2 Weeks</option>
      <option value="167">2 Years</option>
      <option value="146">3 Days</option>
      <option value="162">3 Months</option>
      <option value="152">3 Weeks</option>
      <option value="168">3 Years</option>
      <option value="147">4 Days</option>
      <option value="163">4 Months</option>
      <option value="153">4 Weeks</option>
      <option value="148">5 Days</option>
      <option value="164">5 Months</option>
      <option value="154">5 Weeks</option>
      <option value="149">6 Days</option>
      <option value="165">6 Months</option>
      <option value="155">6 Weeks</option>
      <option value="156">7 Weeks</option>
      <option value="157">8 Weeks</option>
      <option value="158">9 Weeks</option>
    </select>
  </div>
  
  <div class="form-unit" id="recur_ends" style="display:none;">   
    <label for="recur_end_date_picker">Recurrence Ends</label> Select the date this event stops repeating.<br />
        <input type="text" id="recur_end_date_picker" readonly="readonly" style="background:white;" >
        <input type="hidden" name="Recurrence Ends" id="recur_end_date" value="" />
  </div>
  
    <div class="form-unit" id="ad_hoc_recurs" style="display:none;"> 
    <label for="adhoc_1_date_picker">Ad Hoc Recurrences&nbsp;</label>Select up to three more start dates for this event. <br />  
    
    <label for="adhoc_1_date_picker">Ad Hoc Recurrence 1</label> 
    <input type="text" id="adhoc_1_date_picker" readonly="readonly" style="background:white;" >
    <input type="hidden" name="Ad Hoc Recurrence 1" id="adhoc_1_date" value="" /> <br />

    <label for="adhoc_2_date_picker">Ad Hoc Recurrence 2</label> 
    <input type="text" id="adhoc_2_date_picker" readonly="readonly" style="background:white;" >
    <input type="hidden" name="Ad Hoc Recurrence 2" id="adhoc_2_date" value="" /> <br />
  
    <label for="adhoc_3_date_picker">Ad Hoc Recurrence 3</label> 
    <input type="text" id="adhoc_3_date_picker" readonly="readonly" style="background:white;" >
    <input type="hidden" name="Ad Hoc Recurrence 3" id="adhoc_3_date" value="" /> <br />

  </div>



  <div class="form-unit"><label for="brief_description">Brief Description*</label> Enter a short description for this event (maximum 200 characters).<br />
    <textarea name="Brief Description" id="brief_description" maxlength="200" required="required" style="width:100%; height: 4em;"></textarea>
  </div>
  
  <div class="form-unit"><label for="full_description">Full Description*</label> Enter full event information (maximum 1500 characters).<br />
    <div class="wysiwyg_embed"><textarea name="Description" maxlength="1500" required="required" style="width:100%; height: 15em;" id="full_description"></textarea></div>
  </div>

  <div class="row-fluid">

  <div class="span4">
    <div class="form-unit">
      <label for="event_image">Image</label> (maximum 3 mB)<br />
      <input type="file" id="event_image" name="Event Image" value="" accept="*gif,*jpeg,*jpg,*png,*bmp">
    </div>
  </div>

  <div class="span8">
    <div class="form-unit" id="alt_text_unit" style="display:none;">
      <label for="image_alt_text">Alt Text*</label> Briefly describe the image (maximum 200 characters).<br />
      <textarea name="Image Alt Text" id="image_alt_text" maxlength="200" style="width:100%; height: 4em;"></textarea>
    </div>
  </div>

  </div>
  
 <div class="row-fluid">

  <div class="span4">
    <div class="form-unit"><label for="organizer_name">Organizer's Name*</label><br />
      <input type="text" name="Organizer" maxlength="200" size="200"  required="required" id="organizer_name" />
    </div>
  </div>

  <div class="span4">  
    <div class="form-unit"><label for="organizer_email">Organizer's Email*</label> <br />
      <input type="text" name="Organizer E-mail" maxlength="50" size="50"  required="required" id="organizer_email" />
    </div>
  </div>

  <div class="span4">
    <div class="form-unit"><label for="event_location">Event Location</label><br />
      <input type="text" name="Venue" maxlength="200" size="200" id="event_location" />
    </div>
  </div>

</div>

  <div class="row-fluid">

  <div class="span4">
    <div class="form-unit">
      <label for="attachment">Attachment</label> (maximum 500 kB)<br />
      <input type="file" id="attachment" name="Attachment" value="">
    </div>
  </div>

  <div class="span8">
    <div class="form-unit" id="attachment_unit" style="display:none;" >
      <label for="attach_label">Attachment Label*</label> Enter the name of the attached document.<br />
      <input type="text" name="Attachment Label" maxlength="100" size="100" id="attach_label"/>
    </div>
  </div>

  </div>
  

  <div class="form-unit"><label>Subcategory</label> Select any and all subcategories that apply to this event.<br />
    <!-- The three-column-content class is used to apply CSS column formatting in the UMB page layouts. -->
      <div class="three-column-content">
      
      <!--The value of each checkbox inpuy below must correspond to the list-entry ID of each entry in you Common Calendar Subcategories list. To get the list-entry ID, modify the list in T4 Site Manager - in the URL the list ID will be the lid specified at the end of the list URL. For more information, please read the section on "Radio Button/Check Box/Drop-down List Elements" in T4's eForm documentation: https://extranet.terminalfour.com/documentation/core/current/assets/eforms/ 

      This list must be updated to reflect any changes made to your subcategory list in T4 Site Manager. -->

      <input type="checkbox" name="Subcategory" value="222" /> Academic Affairs <br />
      <input type="checkbox" name="Subcategory" value="223" /> Accountability & Compliance <br />
      <input type="checkbox" name="Subcategory" value="224" /> Administration & Finance<br />
      <input type="checkbox" name="Subcategory" value="225" /> Communications & Public Affairs<br />
      <input type="checkbox" name="Subcategory" value="226" /> Development & Alumni Relations<br />
      <input type="checkbox" name="Subcategory" value="227" /> Global Health Initiatives<br />
      <input type="checkbox" name="Subcategory" value="228" /> Government & Community Affairs<br />
      <input type="checkbox" name="Subcategory" value="229" /> Homeland Security<br />
      <input type="checkbox" name="Subcategory" value="230" /> Human Resource Services<br />
      <input type="checkbox" name="Subcategory" value="231" /> President's Office<br />
      <input type="checkbox" name="Subcategory" value="232" /> Research & Development<br />
      <input type="checkbox" name="Subcategory" value="233" /> Technology Services<br />
      <input type="checkbox" name="Subcategory" value="234" /> University Counsel
    </div>
  </div>


<!--Visit https://www.google.com/recaptcha/admin#whyrecaptcha to generate a set of reCaptcha keys for your site. Copy your public key into the line below, beginning after "challenge?k="-->
<div class="form-unit">
    <script type="text/javascript"
       src="http://www.google.com/recaptcha/api/challenge?k=6Lc0yvcSAAAAAGBwyQMW2FXGIz7iK17ugb20x0_o">
    </script>
    <noscript> 
      <!--Copy your public key into the line below, beginning after "noscript?k="-->
       <iframe src="http://www.google.com/recaptcha/api/noscript?k=6Lc0yvcSAAAAAGBwyQMW2FXGIz7iK17ugb20x0_o"
           height="300" width="500" frameborder="0"></iframe><br> 
       <textarea name="recaptcha_challenge_field" rows="3" cols="40">
       </textarea>
       <input type="hidden" name="recaptcha_response_field"
           value="manual_challenge">
    </noscript>
</div>

  <!-- The umb_light class is used to apply type styles in the UMB page layouts. -->
  <p class="umb_light">* Fields marked with an asterisk are required</p>
  <input type="submit" name="SendButton" value="Submit" />  <input type="reset" value="Reset"/>
  
  
</form>

<script>
/*Selectively shows/hides the "Recurrence Ends" and "Ad Hoc Recurrence" fields depending on what the user selects in the "Recurs Every" field.*/
 $("#recurs_every").change(function() {
    //If user has selected "Never"
    if($("#recurs_every").val() == '169'){
      //Hide both
      $("#recur_ends").slideUp();
      $("#ad_hoc_recurs").slideUp();
    }
    //Else if user has selected "Ad Hoc"
    else if($("#recurs_every").val() == '198'){
      //Show Ad Hoc Recurrences and hide Recurrence Ends
      $("#recur_ends").slideUp();
      $("#ad_hoc_recurs").slideDown();
    }
    else {
      //If the user has selected anything else, show Recurrence Ends and hide Ad Hoc Recurrences
      $("#recur_ends").slideDown();
      $("#ad_hoc_recurs").slideUp();
    }
  });

/*Thw Alt Text field is only displayed if the user uploads something to the Image field*/
function showAltText(){
  var fileName = $("#event_image").val();
  if (fileName != "") {
    $("#alt_text_unit").slideDown();
    $("#image_alt_text").attr("required", "required");
  }
}
$(document).ready(function() {
    showAltText();
});
$("#event_image").change(function () {
    showAltText();
});

 /*Thw Attachment Label field is only displayed if the user uploads something to the Attachment field*/
function showAttachmentLabel(){
  var fileName = $("#attachment").val();
  if (fileName != "") {
    $("#attachment_unit").slideDown();
    $("#attach_label").attr("required", "required");
  }
}
$(document).ready(function() {
   showAttachmentLabel();
});
$("#attachment").change(function () {
    showAttachmentLabel();
});
</script>


<!-- Nicedit (nicedit.com) is used to add basic WYSIWYG functionality to the Full Description field-->
 <script type="text/javascript" src="http://js.nicedit.com/nicEdit-latest.js"></script> <script type="text/javascript">
  //<![CDATA[
  var area1;
  area1 = new nicEditor({buttonList : ['bold','italic','ul','ol','link','unlink']}).panelInstance('full_description',{hasPanel : true});
  //]]>
  function setFullDesc(){
    nicEditors.findEditor('full_description').saveContent();
  }
  $('input[type=submit]').bind('click', function () {
    setFullDesc();
  });
</script>

<p><br>Have you submitted your event to the <a href="http://elm.umaryland.edu/elm-weekly-submit/">Elm Weekly</a>? We'd love to help you tell the University what you're up to!</p>

